// 渲染页面
// pagenum	是	int	页码值
// pagesize	是	int	每页显示多少条数据
// cate_id	否	string	文章分类的 Id
// state	否	string	文章的状态，可选值有：已发布、草稿
const baseUrl = 'http://api-breakingnews-web.itheima.net' // 根路径
const query = {
  pagenum: 1,// 页码值 默认显示第一页 
  pagesize: 2,// 每页显示多少条数据
  cate_id: '', // 文章的id
  state: '' // 文章的状态 (已发布,草稿)
}

let total = 0 // 文章列表的总数

// 获取文章列表数据
function getList() {
  axios.get(`${baseUrl}/my/article/list`, {
    headers: {
      Authorization: localStorage.getItem('token')
    },
    params: query
  }).then(res => {
    const { data, status } = res.data
    if (status === 0) {
      // obj.pub_date
      // 先清空数据
      $(".layui-table tbody").empty()
      data.forEach(obj => {
        let theTr = `<tr>
        <td>${obj.title}</td>
        <td>${obj.cate_name}</td>
        <td>${moment(obj.pub_date).format('YYYY-MM-DD hh:mm:ss')}</td>
        <td>${obj.state}</td>
        <th>
        <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger del">删除</button>
            </th>
    </tr>`;
        $(".layui-table tbody").append(theTr);
      });

      // total 字段 => 代表的就是当前文章列表的总数
      total = res.data.total
      // 调用layui page方法  
      setPage()
    }
  })
}
getList()

// 处理分页的逻辑
function setPage() {
  layui.use('laypage', function () {
    var laypage = layui.laypage;

    //完整功能
    laypage.render({
      elem: 'page'  // 页面承载分页的容器
      , count: total   // 数据总条数 (从服务器取)
      , curr: query.pagenum   // 起始页
      , limit: query.pagesize  // 每页显示的条数
      , limits: [2, 3, 5, 10]
      , layout: ['count', 'prev', 'page', 'next', 'limit']
      , jump: function (obj, first) {
        //obj包含了当前分页的所有参数，比如：
        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
        console.log(obj.limit); //得到每页显示的条数

        //首次不执行
        if (!first) {
          // 点击切换之类的操作都会执行当前作用域的代码 
          // console.log('不是首次执行');

          // 4页 => 返回第四页的数据
          // 
          query.pagesize = obj.limit  // 每页的条数
          query.pagenum = obj.curr  // 当前页
          // 发送请求= > 请求文章列表的数据 
          getList()
        }
      }
    });
  });
}
// 删除操作
$('tbody').on('click', '.del', function (e) {
  //看接口文档 => 找对应的参数 = > 发送请求
  // /my/article/delete/:id
  const id = e.target.getAttribute('myid')
  layer.confirm('是否要删除,请想好?????', { icon: 3, title: '温馨提示' }, function (index) {
    //do something
    layer.close(index);
    axios.get(`${baseUrl}/my/article/delete/${id}`, {
      headers: {
        Authorization: localStorage.getItem('token')
      }
    }).then(res => {
      if (res.data.status === 0) {
        // $(e.target).parents('tr').remove()  // 删除掉自身 (自爆)
        getList() // 可以刷新分页的数据
      }
    })
  });
})






// 获取文章分类 => 下拉框的展示数据
// 获取分类列表
axios.get(`${baseUrl}/my/article/cates`, {
  headers: {
    Authorization: localStorage.getItem('token')
  }
}).then(res => {
  console.log(res);
  const { data, status } = res.data
  if (status === 0) {
    // 1.拿到data数据遍历
    // 2.创建标签
    // 3.添加到容器中
    $("select[name=category]").append(`<option value="" lay-verify="cate">所有分类</option>`); // 默认选项- 默认获取所有分类
    data.forEach(obj => {
      const theOption = `<option value="${obj.Id}" lay-verify="cate">${obj.name}</option>`;
      $("select[name=category]").append(theOption);
    })
    // 主动的调用 render方法 
    // 让layui刷新一下form表单
    layui.form.render('select', 'category');
  }
})

// 给表单注册submit事件
$('form').on('submit', e => {
  e.preventDefault()
  const category = $('select[name="category"]').val()
  const state = $('select[name="state"]').val()
  // 发送请求之前=> 要做点东西 => 修改全局的变量 query 里面的cate_id 和state 两个属性值
  query.cate_id = category
  query.state = state
  getList()
})